<template>
  <div class="word-component" :style="getStyle">
    <tool-tip-component
      :line="lineNumber"
      :content="text"
      :lineHeight="getStyle.lineHeight"
      :textIndent="getStyle.textIndent"
    ></tool-tip-component>
  </div>
</template>

<script>
import { number } from "echarts";
import toolTipComponent from "./myToolTipComponent.vue";
export default {
  name: "MyWordComponent",
  components: {
    toolTipComponent,
  },
  props: {
    font: Object,
    color: String,
    textShadow: String,
    // verticalAlign: String,
    textAlign: String,
    height: Number,
    width: Number,
    text: String,
    lineNumber: Number,
    textIndent: String,
    lineHeight: [Number, String],
  },
  computed: {
    getStyle() {
      const {
        font,
        color,
        textShadow,
        // verticalAlign,
        textAlign,
        width,
        height,
        lineNumber,
        lineHeight,
        textIndent,
      } = this;
      return {
        ...font,
        fontSize: font.fontSize + "rem",
        color,
        textShadow,
        // verticalAlign,
        textAlign,
        width: width + "rem",
        height: height + "rem",
        lineNumber,
        lineHeight: lineHeight + "rem",
        textIndent,
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.word-component {
  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}
</style>